iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
Modern Web

菜雞用 Phaser 拾起童年遊戲 系列 第 3

菜雞用 Phaser 拾起童年遊戲 03

  • 分享至 

  • xImage
  •  

基本介紹

我們可以利用 Phaser 的 Game 物件來創造場景,並且給他config參數來設定它。

const config = {
    type: Phaser.AUTO,
    width: 600,
    height: 800,
    scene: {
        init,
        preload,
        create,
        update
    }
}

var game = new Phaser.Game(config);
config 裡面可以給予一些參數:
  1. type:設定你渲染的context,可以設定為Phaser.CANVASPhaser.WEBGLPhaser.AUTO,建議使用Phsaer.AUTO,他會自動嘗試 WebGL,但是如果瀏覽器不支持 WebGL,則他會轉換成 canvas。
  2. width:設定 canvas 的寬度。
  3. hieght:設定 canvas 的高度。
  4. scene:一個物件,可以給予initpreloadcreateupdate 對應的 function ,用來控制 canvas 。
  5. physics:設定場景內的重量變化。

生命週期 init 函數

可以在這裡定義一些自定義的東西,如果沒有什麼要自己加上去的話可以不給沒關係唷~

function init() {
    console.log('init')
}

生命週期 preload 函數

可以在這裡預先載入我們所會用到的圖片、音檔,並且給予他對應的 key 值,這樣就就可以在控制的時候調用他們囉!

function preload() {
    this.load.image('bg','assets/bg.png')
    this.load.audio('bgMusic','assets/bgMusic.mp3')
}

生命週期 create 函數

可以在這裡佈置我們的場景、人物、以及一些物品,可以將他們設定在場景內。

function create() {
    this.add.image(400,300,'bg')
    this.sound.play('bgMusic',{start: 1, duration: 2.0})
}

生命週期 update 函數

可以在這裡做控制處理以及場景的變換或是物件移動...等等,主要的控制都在這裡。

function update() {
    ...
}

總結

基本介紹都結束囉!相信大家都磨刀霍霍,準備好了吧!明天開始挑戰我們的第一個遊戲~

tags: Phaser Game 2020鐵人賽

上一篇
菜雞用 Phaser 拾起童年遊戲 02
下一篇
菜雞用 Phaser 拾起童年遊戲 04
系列文
菜雞用 Phaser 拾起童年遊戲 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言